import React from 'react';
import { Image, View, Text, Platform, TouchableOpacity, StyleSheet, ImageBackground, ScrollView } from 'react-native';
import moment from 'moment'
import navigationhelper from 'src/components/navigationhelper'
import NavBar from 'src/components/navBar'
import Layer from 'src/components/Layer'
import { isIPhoneX } from 'src/util'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import { deviceWidth } from '../../../util';
import { inject, observer } from "mobx-react/native"
import { Flex } from '@ant-design/react-native';
import HomeManager from '../../../service/Home'

@inject('userAuth')

@observer

export default class MyTeamNewHomePage extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      dict: {},
    }
  }

  componentDidMount = () => {
    Layer.hiddenLoading()
    this.getTeamDetail()
  }

  grideView = (content, title) => {
    return (
      <View style={styles.grideV}>
        <Text style={{ fontSize: 12, color: '#8E8E93' }}>{title}</Text>
        <Text style={{ fontSize: 14, color: '#2E2E2E' }}>{content}</Text>
      </View>
    )
  }

  getTeamDetail = () => {
    Layer.showLoading()
    HomeManager.fetchHomeTeamUser({ token: this.props.userAuth.token, users_id: this.props.userAuth.currentUser.id }).then((res) => {
      Layer.hiddenLoading()
      if (res.status == 'success') {
        this.setState({
          dict: res.data,
        })
      }
    }).catch((res) => {
      Layer.hiddenLoading()
    })
  }

  middleView = (content, title) => {
    return (
      <View style={{ justifyContent: 'center', alignItems: 'center' }}>
        <Text style={styles.upText}>{content}</Text>
        <Text style={styles.downText}>{title}</Text>
      </View>
    )
  }


  render() {
    const { nick_name, avatar, level_name, real_name, level, team_trade_amount } = this.props.userAuth.currentUser
    const { dict } = this.state
    const arr = Object.keys(dict)
    return (
      <ScrollView>
        <ImageBackground resizeMode='stretch' style={{ width: deviceWidth, height: 196 }} source={require('src/assets/mine/teambg.png')}>
          <NavBar
            barStyle={'light-content'}
            title={<Text style={{ fontSize: 18, color: '#fff' }}>我的团队</Text>}
            backgroundColor={'transparent'}
            statusBarBgColor={'#fff'}
            back={() => { navigationhelper.goBack() }}
            leftText={<Text style={{ color: '#fff' }}>返回</Text>}
            LifeImage={require('src/assets/nav/fanhuibaise.png')}
          />
          <View style={{ flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ color: '#FFFFFF', fontSize: 30, marginTop: 36 }}>{team_trade_amount}</Text>
            <Text style={{ color: '#99BEFF', fontSize: 12, marginTop: 10 }}>{'总还款数'}</Text>
          </View>
        </ImageBackground>
        <View style={{ backgroundColor: '#fff', padding: 15, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <View>
              <Image
                defaultSource={require('src/assets/mine/userDefaultAvatar.png')}
                source={{ uri: avatar }} style={{ height: 42, width: 42, borderRadius: 21 }}>
              </Image>
            </View>
            <View style={{ marginLeft: 10 }}>
              <Text style={{ color: '#378EFB', fontSize: 16, fontFamily: 'PingFang SC' }}>{real_name ? real_name : nick_name}</Text>
              <Text style={{ color: '#8E8E93', fontSize: 12, fontFamily: 'PingFang SC' }}>{level_name}</Text>
            </View>
          </View>
          {
            level === 1
              ?
              <TouchableOpacity
                activeOpacity={0.8}
                onPress={() => {
                  navigationhelper.navigate('MemberCenter')
                }}>
                <View style={{ borderColor: '#378EFB', borderWidth: 1, borderRadius: 5, paddingLeft: 9, paddingBottom: 5, paddingRight: 9, paddingTop: 5 }}>
                  <Text style={{ color: '#378EFB' }}>开通会员</Text>
                </View>
              </TouchableOpacity>
              :
             null
          }

        </View>
        <View>
          <View style={[styles.viewStyleTwo, { alignItems: 'center', marginTop: 10 }]}>
            <View style={{ justifyContent: 'space-between', marginTop: 20, flexDirection: 'row' }}>

              <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ color: '#2E2E2E', fontSize: 16, fontWeight: 'bold' }}>用户管理</Text>
              </View>
              <TouchableOpacity
                activeOpacity={0.8}
                onPress={() => {
                  navigationhelper.navigate('MyTeamUserManager', { userId: dict.id })
                }}>

                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                  <Text style={{ color: '#8E8E93', fontSize: 12, marginLeft: deviceWidth - 200 }}>查看详情</Text>
                  <Image style={{ width: 20, height: 20 }} source={require('src/assets/icon_arrow_grey.png')}></Image>
                </View>
              </TouchableOpacity>
            </View>

            <View style={{ marginTop: 20 }}>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingLeft: 20, paddingRight: 20 }}>
                <View style={styles.rectangleViewStyle}>
                  <View>
                    <Text style={{ color: '#2E2E2E', fontSize: 20 }}>{arr.length == 0 ? '0' : dict.child.child}</Text>
                    <Text style={{ color: '#8E8E93', fontSize: 12, marginTop: 5 }}>用户总数</Text>
                  </View>
                  <View>
                    <Image style={{ width: 40, height: 40 }} source={require('src/assets/icon_user_group.png')}></Image>
                  </View>
                </View>
                <View style={styles.rectangleViewStyle}>
                  <View>
                    <Text style={{ color: '#2E2E2E', fontSize: 20 }}>{arr.length == 0 ? '0' : dict.child.todayChild}</Text>
                    <Text style={{ color: '#8E8E93', fontSize: 12, marginTop: 5 }}>今日注册</Text>
                  </View>
                  <View>
                    <Image style={{ width: 40, height: 40 }} source={require('src/assets/icon_up_line.png')}></Image>
                  </View>
                </View>
              </View>
            </View>
            <View style={{ width: deviceWidth, marginTop: 20 }}>
              <View style={{ flexDirection: 'row', padding: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5', alignItems: 'center', marginLeft: 10, justifyContent: 'space-between' }}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                  <View><Image style={{ width: 38, height: 38 }} source={require('src/assets/icon_mianfei.png')}></Image></View>
                  <View style={{ marginLeft: 15 }}>
                    <Text style={{ fontSize: 16, color: '#2E2E2E' }}>免费会员</Text>
                    <Text style={{ fontSize: 12, color: '#8E8E93', marginTop: 5 }}>总人数:{arr.length == 0 ? '0' : dict.child.indirectLevel1Child + dict.child.directLevel1Child}人</Text>
                  </View>
                </View>
                <View style={{ marginRight: 10 }}>
                  <Text style={{ fontSize: 12, color: '#8E8E93' }}>直接推广:{arr.length == 0 ? '0' : dict.child.directLevel1Child}</Text>
                  <Text style={{ fontSize: 12, color: '#8E8E93', marginTop: 5 }}>间接推广:{arr.length == 0 ? '0' : dict.child.indirectLevel1Child}</Text>
                </View>
              </View>

              <View style={{ flexDirection: 'row', padding: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5', alignItems: 'center', marginLeft: 10, justifyContent: 'space-between' }}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                  <View><Image style={{ width: 38, height: 38 }} source={require('src/assets/icon_vip.png')}></Image></View>
                  <View style={{ marginLeft: 15 }}>
                    <Text style={{ fontSize: 16, color: '#2E2E2E' }}>VIP会员</Text>
                    <Text style={{ fontSize: 12, color: '#8E8E93', marginTop: 5 }}>总人数:{arr.length == 0 ? '0' : dict.child.indirectLevel2Child + dict.child.directLevel2Child}人</Text>
                  </View>
                </View>
                <View style={{ marginRight: 10 }}>
                  <Text style={{ fontSize: 12, color: '#8E8E93' }}>直接推广:{arr.length == 0 ? '' : dict.child.directLevel2Child}</Text>
                  <Text style={{ fontSize: 12, color: '#8E8E93', marginTop: 5 }}>间接推广:{arr.length == 0 ? '0' : dict.child.indirectLevel2Child}</Text>
                </View>
              </View>

              <View style={{ flexDirection: 'row', padding: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5', alignItems: 'center', marginLeft: 10, justifyContent: 'space-between' }}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                  <View><Image style={{ width: 38, height: 38 }} source={require('src/assets/icon_baijin.png')}></Image></View>
                  <View style={{ marginLeft: 15 }}>
                    <Text style={{ fontSize: 16, color: '#2E2E2E' }}>白金会员</Text>
                    <Text style={{ fontSize: 12, color: '#8E8E93', marginTop: 5 }}>总人数:{arr.length == 0 ? '0' : dict.child.indirectLevel3Child + dict.child.directLevel3Child}人</Text>
                  </View>
                </View>
                <View style={{ marginRight: 10 }}>
                  <Text style={{ fontSize: 12, color: '#8E8E93' }}>直接推广:{arr.length == 0 ? '0' : dict.child.directLevel3Child}</Text>
                  <Text style={{ fontSize: 12, color: '#8E8E93', marginTop: 5 }}>间接推广:{arr.length == 0 ? '0' : dict.child.indirectLevel3Child}</Text>
                </View>
              </View>

              <View style={{ flexDirection: 'row', padding: 10, borderBottomWidth: 1, borderBottomColor: '#f5f5f5', alignItems: 'center', marginLeft: 10, justifyContent: 'space-between' }}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                  <View><Image style={{ width: 38, height: 38 }} source={require('src/assets/icon_wrz.png')}></Image></View>
                  <View style={{ marginLeft: 15 }}>
                    <Text style={{ fontSize: 16, color: '#2E2E2E' }}>未认证</Text>
                    <Text style={{ fontSize: 12, color: '#8E8E93', marginTop: 5 }}>总人数:{arr.length == 0 ? '0' : dict.child.indirectNotRealName + dict.child.directNotRealName}人</Text>
                  </View>
                </View>
                <View style={{ marginRight: 10 }}>
                  <Text style={{ fontSize: 12, color: '#8E8E93' }}>直接推广:{arr.length == 0 ? '0' : dict.child.directNotRealName}</Text>
                  <Text style={{ fontSize: 12, color: '#8E8E93', marginTop: 5 }}>间接推广:{arr.length == 0 ? '0' : dict.child.indirectNotRealName}</Text>
                </View>
              </View>

            </View>
          </View >

          <View style={[styles.viewStyleThree, { height: 190, alignItems: 'center' }]}>
            <View style={{ justifyContent: 'space-between', marginTop: 20, paddingHorizontal: 10, flexDirection: 'row' }}>
              <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ color: '#2E2E2E', fontSize: 16, fontWeight: 'bold' }}>分润管理</Text>
              </View>
              <TouchableOpacity
                activeOpacity={0.8}
                onPress={() => {
                  navigationhelper.navigate('ReceiveMoneyTeam', { dict: this.state.dict })
                }}
              >
                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                  <Text style={{ color: '#8E8E93', fontSize: 12, marginLeft: deviceWidth - 200 }}>查看详情</Text>
                  <Image style={{ width: 20, height: 20 }} source={require('src/assets/icon_arrow_grey.png')}></Image>
                </View>
              </TouchableOpacity>
            </View>

            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 }}>
              <View style={{ flexDirection: 'row', justifyContent: 'space-between', paddingLeft: 20, paddingRight: 20 }}>
                <View style={styles.rectangleViewStyle}>
                  <View>
                    <Text style={{ color: '#2E2E2E', fontSize: 20 }}>{arr.length == 0 ? 0 : dict.income.total}</Text>
                    <Text style={{ color: '#8E8E93', fontSize: 12, marginTop: 5 }}>收益总额</Text>
                  </View>
                  <View>
                    <Image style={{ width: 40, height: 40 }} source={require('src/assets/icon_money.png')}></Image>
                  </View>
                </View>
                <View style={styles.rectangleViewStyle}>
                  <View>
                    <Text style={{ color: '#2E2E2E', fontSize: 20 }}>{arr.length == 0 ? 0 : dict.income.today}</Text>
                    <Text style={{ color: '#8E8E93', fontSize: 12, marginTop: 5 }}>今日收益</Text>
                  </View>
                  <View>
                    <Image style={{ width: 40, height: 40 }} source={require('src/assets/icon_up_line.png')}></Image>
                  </View>
                </View>
              </View>
            </View>
          </View >
        </View>
      </ScrollView>
    )
  }

}

const styles = StyleSheet.create({
  viewStyle: {
    marginTop: 20,
    borderRadius: 10,
    backgroundColor: '#fff',
    marginLeft: 10,
    marginRight: 10,
  },
  viewStyleThree: {
    marginTop: 10,
    borderRadius: 10,
    backgroundColor: '#fff',
  },
  viewStyleTwo: {
    borderRadius: 10,
    backgroundColor: '#fff',
  },
  upText: {
    color: '#378EFB',
    fontSize: 20,
  },
  downText: {
    color: '#8E8E93',
    fontSize: 14,
    marginTop: 5,
  },
  grideV: {
    paddingHorizontal: 10,
    borderRadius: 5,
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#F5F9FF',
    height: 40,
    width: (deviceWidth - 100) * 0.5,
    alignItems: 'center',
    marginLeft: 25,
    marginRight: 25,
  },
  grideVSmall: {
    marginTop: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: '#F5F9FF',
    height: 40,
    alignItems: 'center',
    width: deviceWidth - 80
  },
  backgrideV: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    marginHorizontal: 20,
  },
  leftView: {
    paddingLeft: 12,
    paddingTop: Platform.OS === 'ios' ? (isIPhoneX() ? 30 : 10) : 0,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  rectangleViewStyle: {
    backgroundColor: '#fff',
    flexDirection: 'row',
    width: (deviceWidth - 60) * 0.5,
    justifyContent: 'space-between',
    marginLeft: 10,
    marginRight: 10,
    paddingHorizontal: 10,
    paddingVertical: 20,
    shadowColor: "#8E8E93",
    shadowOffset: {
      x: 0,
      y: 3,
    },
    borderRadius: 8,
    shadowOpacity: 0.33,
    shadowRadius: 4.62,
    elevation: 4,
  }
})